<template>
    <div class="header">
			<div class="header-left">
				<span class="iconfont">&#xe624;</span>
			</div>
			<div class="header-input">
				搜索
			</div>
			<router-link tag="div" to="/city" class="header-right">
				{{this.city}}
				<span class="iconfont arrow">&#xe64a;</span>
			</router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name: 'HomeHeader',
	computed: {
		...mapState(['city'])
	}
}
</script>

<style lang="stylus" scoped>
	@import "~@/assets/styles/variables.styl"
	.header
		display: flex
		line-height: 3rem
		background: $bgcolor
		text-align: center
		.header-left
			color: #fff
			width: 2rem
		.header-right
			color: #fff
			min-width: 3rem
			margin: 0 .5rem
		.header-input
			flex: 1
			height: 2rem
			line-height: 2rem
			margin-top: .5rem
			border-radius: .5rem
			background: #fff
</style>



